<template>
  <div class="search">
    <input type="text" v-model.trim="add_msg" @keyup.enter="add" />
  </div>
</template>

<script>
import { nanoid } from "nanoid";

export default {
  name: "search",
  data() {
    return {
      add_msg: "",
    };
  },
  methods: {
    add() {
      if (this.add_msg === "") return alert("不能为空！");
      //添加的话就把值传给list(使用事件总线)
      this.$bus.$emit("newAdd_data", {
        id: nanoid(),
        msg: this.add_msg,
        isChecked: false,
      });
      //清空
      this.add_msg = "";
    },
  },
};
</script>

<style  scoped>
.search input {
  height: 35px;
  width: 600px;
  outline: 0;
}
.search input:focus {
  border: 2px solid #c6e2ff;
}
</style>
